<!doctype html>
<html class="no-js" lang="en">

<!-- Mirrored from creatively.equiet.sk/typography.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:15 GMT -->
<head>
	<meta charset="utf-8">

	<!-- Page title -->
	<title>Creatively Site Template</title>

	<!-- Page icon -->
	<link rel="shortcut icon" href="favicon.png">

	<!-- Stylesheet -->
	<link rel="stylesheet" href="css/style.css">
	
	<!-- Nivo Slider stylesheet -->
	<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
	
	<!-- Fancybox stylesheet -->
	<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

	<!-- Modernizr which enables HTML5 elements & feature detects -->
	<script src="js/libs/modernizr-1.7.min.js"></script>
		
	<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
	

	<!-- Customization -->
	<style type="text/css">
		#customization {
			background-color: rgba(255,255,255,0.9);
			width: 156px;
			position: fixed;
			top: 50%;
			margin: -270px 0 0 10px;
			z-index: 100;
			-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
			-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
		}
			.no-rgba #customization {
				background-color: #fff;
			}
			#customization section, #customization .hide {
				background-color: #fff;
				padding: 10px;
				margin: 5px;
				-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
				-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); box-shadow: 0px 0px 2px rgba(0,0,0,0.7);
			}
				#customization .hide {
					display: block;
					float: right;
					width: auto;
				}
				#customization h2 {
					font-family: "Droid Sans", Arial, sans-serif;
					font-style: normal;
					font-size: 13px;
					font-weight: bold;
					line-height: 20px;
					background: none;
					padding: 0;
				}
				#customization a {
					display: inline-block;
					width: 16px;
					height: 16px;
					margin: 1px;
					float: left;
				}
					#customization .selected {
						-moz-box-shadow: 0px 0px 3px #000; -webkit-box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000;
						margin: 0;
						border: 1px solid #ccc;
					}				
	</style>

</head>
 

<body>

<!-- Wrapper begin --><div id="wrapper" class="clearfix">

<!-- Header -->
<header>
	<div class="container_12">
		<h1 class="grid_4"><a href="index-2.html">Creatively</a></h1>
		<nav class="grid_8">
			<ul class="right">
				<li>
					<a href="index-2.html">Home</a>
					<ul>
						<li><a href="index-2.html">Standard</a></li>
						<li><a href="index_2.html">Nivo Slider</a></li>
					</ul>
				</li>
				<li>
					<a href="about.html">About</a>
					<ul>
						<li><a href="about.html">About</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</li>
				<li>
					<a href="services.html">Services</a>
				</li>
				<li>
					<a href="portfolio.html">Portfolio</a>
					<ul>
						<li><a href="portfolio.html">4 columns</a></li>
						<li><a href="portfolio_2.html">3 columns</a></li>
						<li><a href="portfolio_3.html">1 column</a></li>
					</ul>
				</li>
				<li>
					<a href="blog.html">Blog</a>
					<ul>
						<li><a href="blog.html">Blog 1</a></li>
						<li><a href="blog_2.html">Blog 2</a></li>
						<li><a href="blogpost.html">Blogpost</a></li>
					</ul>
				</li>
				<li class="selected">
					<a href="pricing_boxes.html">Pages</a>		
					<ul>
						<li><a href="pricing_boxes.html">Pricing boxes</a></li>
						<li><a href="pricing_table.html">Pricing table</a></li>
						<li><a href="eshop.html">E-shop</a></li>
						<li><a href="typography.html">Typography</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</header>

<!-- Container begin --><div class="container_12">

<!-- MAIN CONTENT BEGIN -->

 <!-- Page title -->
<section id="title">
	
	<!-- Heading -->
	<h1 class="grid_5">Pages <span>Pricing table</span></h1>
	
	<!-- Submenu -->
	<nav class="grid_7">
		<ul>
			<li><a href="pricing_boxes.html">Pricing boxes</a></li>
			<li><a href="pricing_table.html">Pricing table</a></li>
			<li><a href="eshop.html">E-shop</a></li>
			<li class="selected"><a href="typography.html">Typography</a></li>
		</ul>
	</nav>
		
</section>
	
<!-- Sidebar -->
<section class="sidebar grid_4">

	<!-- Categories -->
	<h3>Categories</h3>
	<ul class="categories">
		<li><a href="#">Category</a></li>
		<li class="selected"><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Praesent metus</a></li>
		<li><a href="#">Pellentesque</a></li>
	</ul>	
	
</section>

<!-- Typography -->
<section class="text grid_8">
	
	<p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit. Aenean at vestibulum nunc. Sed augue magna, molestie at varius vitae, aliquam et purus. Quisque lacus enim, cursus a ornare non, ultricies quis nisl. Morbi eget velit dignissim ante sodales fringilla. Vestibulum molestie sagittis neque quis dignissim.</p>
	<p><strong>Integer congue, erat id lobortis rutrum, libero dolor cursus nibh, vel volutpat lectus sem vulputate nisi.</strong></p>
	<p>Donec enim ligula, malesuada et elementum non, euismod eu neque. Vivamus lorem elit, malesuada nec egestas eu, congue eget justo. Aliquam laoreet dictum tristique. Duis quam tortor, ultricies sit amet euismod sed, auctor quis mauris. Phasellus ac sollicitudin nisl.</p>
	<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	<p>Maecenas ac justo leo. Quisque auctor neque et tortor molestie at porta lorem faucibus. Sed eget nisi quis dolor posuere condimentum. Suspendisse sem justo, lacinia iaculis fermentum in, tempus vel magna. Morbi metus tortor, volutpat vitae posuere non, commodo nec lectus.</p>
	
	<div class="space"></div>
	<hr />
	
	<a href="#" class="button_grey_big">Big grey button</a>&nbsp;
	<a href="#" class="button_green_big">Big green button</a>&nbsp;
	<a href="#" class="button_grey">Grey button</a>&nbsp;
	<a href="#" class="button_green">Green button</a>&nbsp;
	<a href="#" class="read_more">Read more</a>
	
	<div class="space"></div>
	<hr />
	
	<h2>Headline &lt;h2&gt;</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h3>Headline &lt;h3&gt;</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h4>Headline &lt;h4&gt;</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h5>Headline &lt;h5&gt;</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h6>Headline &lt;h6&gt;</h6>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<div class="space"></div>
	<hr />
	
	<h2><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h2&gt;</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h3><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h3&gt;</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h4><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h4&gt;</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h5><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h5&gt;</h5>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<h6><img src="img/icons/applications-internet.png" alt="" /> Headline &lt;h6&gt;</h6>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus magna, consequat at semper id, semper vitae ante.</p>
	
	<div class="space"></div>
	<hr />

	<h4 class="small_section">Small section headline</h4>
	<p>Maecenas non tempor nisl. In hac habitasse platea dictumst. Etiam sagittis viverra cursus.</p>
	
	<div class="space"></div>
	<hr />

	<p class="message_good message">This is a good message.</p>
	<p class="message_bad message">This is a bad message.</p>
	<p class="message_info message">You should know about this message.</p>
	
	<div class="space"></div>
	<hr />
	
	<ul>
		<li>Lorem ipsum</li>
		<li>Praesent metu</li>
		<li>Integer congue</li>
		<li>Phasellus</li>
		<li>
			Mentum interdum
			<ul>
				<li>Lorem ipsum</li>
				<li>Praesent metu</li>
				<li>Integer congue</li>
			</ul>
		</li>
	</ul>
	
</section> 

<!-- MAIN CONTENT END -->

<!-- Container end --></div>

<!-- Wrapper end --></div>

<!-- Footer -->
<footer>
	<div class="container_12">
		<div class="social grid_2">
			<h6>Social</h6>
			<p>
				<a href="#"><img src="img/icons/rss_square.png" alt="RSS" /></a>
				<a href="#"><img src="img/icons/social_facebook.png" alt="Facebook" /></a>
				<a href="#"><img src="img/icons/social_linked_in.png" alt="Linked in" /></a>
				<a href="#"><img src="img/icons/social_twitter.png" alt="Twitter" /></a>
				<a href="#"><img src="img/icons/social_flickr.png" alt="Flickr" /></a>
			</p>
		</div>
		<div class="links grid_6">
			<h6>Links</h6>
			<p>
				<a href="#">Home</a>
				<a href="#">About us</a>
				<a href="#">Contact</a>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pages</a>
			</p>
		</div>
		<div class="copyright grid_4">
			<h6><a href="#">Creatively</a></h6>
			<p>&copy; 2011 Company name. All rights reserved.</p>
		</div>
	</div>
</footer>
	
<!-- Load main script -->
<script src="js/script.js"></script>

<!-- Load Nivo Slider -->
<script src="js/libs/jquery.nivo.slider.pack.js"></script>

<!-- Load Fancybox -->
<script src="js/libs/jquery.fancybox-1.3.4.pack.js"></script>

<!-- Load Twitter news stream -->
<script src="js/libs/jquery.tweet.js"></script>


<!-- Customization -->
<div id="customization">

	<a href="#" class="hide"><img src="img/hide.png" alt="" /></a>
	
	<div class="options float">
	
		<section class="header_color clearfix">
			<h2>Header pattern</h2>
			<div class="header_white">
				<a href="#" data-src="light_honeycomb.png"></a>
				<a href="#" data-src="little_pluses.png"></a>
				<a href="#" data-src="45degreee_fabric.png"></a>
				<a href="#" data-src="60degree_gray.png"></a>	
				<a href="#" data-src="beige_paper.png"></a>
				<a href="#" data-src="bright_squares.png"></a>
				<a href="#" data-src="brushed_alu.png"></a>
				<a href="#" data-src="concrete_wall_2.png"></a>
				<a href="#" data-src="concrete_wall_3.png"></a>
				<a href="#" data-src="white_sand.png"></a>
				<a href="#" data-src="vichy.png"></a>
				<a href="#" data-src="wavecut.png"></a>
				<a href="#" data-src="white_carbon.png"></a>
				<a href="#" data-src="rockywall.png"></a>
				<a href="#" data-src="smooth_wall.png"></a>
				<a href="#" data-src="noisy.png"></a>
				<a href="#" data-src="old_mathematics.png"></a>
				<a href="#" data-src="paper_1.png"></a>
				<a href="#" data-src="paper_2.png"></a>
				<a href="#" data-src="paper_3.png"></a>
				<a href="#" data-src="pinstripe.png"></a>
				<a href="#" data-src="leather_1.png"></a>
				<a href="#" data-src="cork_1.png"></a>
				<a href="#" data-src="double_lined.png"></a>
				<a href="#" data-src="exclusive_paper.png"></a>
				<a href="#" data-src="fabric_1.png"></a>
				<a href="#" data-src="soft_wallpaper.png"></a>
				<a href="#" data-src="subtle_freckles.png"></a>
				<a href="#" data-src="subtle_orange_emboss.png"></a>
				<a href="#" data-src="green_gobbler.png"></a>
				<a href="#" data-src="grunge_wall.png"></a>
				<a href="#" data-src="handmadepaper.png"></a>
			</div>
			<div class="header_black">
				<a href="#" data-src="always_grey.png"></a>
				<a href="#" data-src="brushed_alu_dark.png"></a>
				<a href="#" data-src="padded.png"></a>
				<a href="#" data-src="gray_sand.png"></a>
				<a href="#" data-src="crossed_stripes.png"></a>
				<a href="#" data-src="green-fibers.png"></a>
				<a href="#" data-src="tactile_noise.png"></a>
				<a href="#" data-src="black_denim.png"></a>
				<a href="#" data-src="black-Linen.png"></a>
				<a href="#" data-src="blackmamba.png"></a>
				<a href="#" data-src="carbon_fibre.png"></a>
				<a href="#" data-src="dark_stripes.png"></a>
				<a href="#" data-src="darth_stripe.png"></a>
				<a href="#" data-src="concrete_wall.png"></a>
				<a href="#" data-src="black_paper.png"></a>
				<a href="#" data-src="micro_carbon.png"></a>
				<a href="#" data-src="random_grey_variations.png"></a>
				<a href="#" data-src="wood_1.png"></a>
			</div>
		</section>
		
		<section class="showcase_color clearfix">
			<h2>Showcase pattern</h2>
			<a href="#" data-src="light_honeycomb.png"></a>
			<a href="#" data-src="little_pluses.png"></a>
			<a href="#" data-src="45degreee_fabric.png"></a>
			<a href="#" data-src="60degree_gray.png"></a>	
			<a href="#" data-src="beige_paper.png"></a>
			<a href="#" data-src="bright_squares.png"></a>
			<a href="#" data-src="brushed_alu.png"></a>
			<a href="#" data-src="concrete_wall_2.png"></a>
			<a href="#" data-src="concrete_wall_3.png"></a>
			<a href="#" data-src="white_sand.png"></a>
			<a href="#" data-src="vichy.png"></a>
			<a href="#" data-src="wavecut.png"></a>
			<a href="#" data-src="white_carbon.png"></a>
			<a href="#" data-src="rockywall.png"></a>
			<a href="#" data-src="smooth_wall.png"></a>
			<a href="#" data-src="noisy.png"></a>
			<a href="#" data-src="old_mathematics.png"></a>
			<a href="#" data-src="paper_1.png"></a>
			<a href="#" data-src="paper_2.png"></a>
			<a href="#" data-src="paper_3.png"></a>
			<a href="#" data-src="pinstripe.png"></a>
			<a href="#" data-src="leather_1.png"></a>
			<a href="#" data-src="cork_1.png"></a>
			<a href="#" data-src="double_lined.png"></a>
			<a href="#" data-src="exclusive_paper.png"></a>
			<a href="#" data-src="fabric_1.png"></a>
			<a href="#" data-src="soft_wallpaper.png"></a>
			<a href="#" data-src="subtle_freckles.png"></a>
			<a href="#" data-src="subtle_orange_emboss.png"></a>
			<a href="#" data-src="green_gobbler.png"></a>
			<a href="#" data-src="grunge_wall.png"></a>
			<a href="#" data-src="handmadepaper.png"></a>
		</section>
		
	</div>
	
</div>
<script>
$(function () {
	$(".options a").each(function () {
		$(this).css("background", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization section a").click(function () {
		$(this).parents('section').find('a').removeClass("selected");
		$(this).addClass("selected");
	});
	$("#customization .header_color a").click(function () {
		$("header")
			.css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")")
			.removeClass("header_black")
			.removeClass("header_white")
			.addClass($(this).parent().attr("class"))
		;
	});
	if ($("#showcase").length == 0) $("#customization .showcase_color").css('display', 'none');
	$("#customization .showcase_color a").click(function () {
		$("#showcase").css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization .hide").toggle(function () {
		$("#customization .options").slideUp("slow", function () {
			$("#customization").animate({"margin-left": "-110px"}, "slow");
			$("#customization .hide img").attr("src", "img/show.png");		
		});	
	}, function () {
		$("#customization").animate({"margin-left": "10px"}, "slow", function () {
			$("#customization .options").slideDown("slow");
			$("#customization .hide img").attr("src", "img/hide.png");
		});	
	});
});
</script>

<!-- Google Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2529322-9']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</body>

<!-- Mirrored from creatively.equiet.sk/typography.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:15 GMT -->
</html>
